<template>
  <view class="partner-detail-container"> 
    <view class="detail-section">
      <view class="title">三缺一</view>
      <view class="info-row">
        <u-tag text="棋牌" type="primary" />
        <u-tag text="长沙市" type="success" />
        <u-tag text="男女不限" type="info" />
      </view>
      <view class="desc">今晚 19:00 欢乐棋牌室，缺一位小伙伴，速来！</view>
      <view class="meta">发布时间：2025-06-27 18:00</view>
      <view class="user-row">
        <u-avatar src="/static/avatar.png" size="mini" />
        <text class="nickname">oiw</text>
        <u-button type="primary" size="mini" shape="circle">私聊</u-button>
      </view>
      <u-button type="primary" shape="circle" size="large">我要报名</u-button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PartnerDetail',
  data() {
    return {
      socket: null,
      isClosedByUser: false
    }
  },
  mounted() {
    this.initWebSocket()
  },
  methods: {
    initWebSocket() {
      // 初始化WebSocket连接
      this.socket = uni.connectSocket({
        url: 'ws://47.76.119.219:2346',
        success: () => {
          console.log('WebSocket连接成功')
        },
        fail: (err) => {
          console.error('WebSocket连接失败:', err)
          uni.showToast({ title: '连接失败，请重试', icon: 'none' })
        }
      })

      // 监听连接打开
      this.socket.onOpen(() => {
        console.log('WebSocket连接已打开')
        // 发送登录参数
        this.socket.send({
          data: JSON.stringify({ type: "login", userId: "3" })
        })
      })

      // 监听消息接收
      this.socket.onMessage((res) => {
        console.log('收到服务器消息:', res.data)
        this.handleSocketMessage(res.data)
      })

      // 监听错误
      this.socket.onError((err) => {
        console.error('WebSocket错误:', err)
        uni.showToast({ title: '连接错误', icon: 'none' })
      })

      // 监听关闭
      this.socket.onClose((res) => {
        console.log('WebSocket已关闭:', res)
        // 自动重连逻辑
        if (!this.isClosedByUser) {
          setTimeout(() => this.initWebSocket(), 3000)
        }
      })
    },
    handleSocketMessage(data) {
      // 消息处理逻辑
      try {
        const message = JSON.parse(data)
        switch(message.type) {
          case 'update':
            // 处理数据更新
            break
          case 'notification':
            uni.showToast({ title: message.content, icon: 'none' })
            break
          default:
            console.log('未知消息类型:', message.type)
        }
      } catch (e) {
        console.error('消息解析失败:', e)
      }
    }
  },
  beforeDestroy() {
    // 页面销毁时关闭连接
    if (this.socket) {
      this.isClosedByUser = true
      this.socket.close()
    }
  }
}
</script>

<style scoped>
.partner-detail-container {
  min-height: 100vh;
  background: #f8f8f8;
}

.top-bar {
  display: flex;
  align-items: center;
  padding: 0 32rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-left: 24rpx;
}

.detail-section {
  background: #fff;
  border-radius: 16rpx;
  margin: 32rpx;
  padding: 32rpx;
}

.info-row {
  display: flex;
  gap: 16rpx;
  margin-bottom: 16rpx;
}

.desc {
  font-size: 28rpx;
  color: #555;
  margin: 16rpx 0;
}

.meta {
  font-size: 24rpx;
  color: #aaa;
  margin-bottom: 16rpx;
}

.user-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.nickname {
  font-size: 28rpx;
  font-weight: bold;
}
</style>
